<template>
	<view>
		<u-sticky bgColor="#fff">
		    <u-tabs
			:scrollable="false"
			:current="current"
			@change="tabsChange"
			lineWidth="30"
			lineColor="#ae87d8"
			:activeStyle="{
				color: '#ae87d8',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}"
			 itemStyle=" height: 50px;width:50%;"
			 :list="list1"></u-tabs>
	    </u-sticky>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="list" v-if="dataList.length">
				<view class="li" v-for="(item,index) in dataList" :class="current!=0?'init':''" :key="index">
					<!-- <view class="wu" v-if="item.status==2"><image class="wu-ico" src="@/static/ico/wu-ico1.png" mode=""></image></view> -->
					
					<!-- <view class="order-num flex-box"> -->
					<!-- 	<view class="box-1">
							订单号：{{item.code}}
						</view> -->
						<!-- <text class="order-status">{{item.status | statusTab}}</text> -->
					<!-- </view> -->
					<view class="order-mess flex-box">
						<image :src="item.thumb" mode="aspectFill" class="icon-item"></image>
						<view class="box-1">
							<view class="flex-box item-title" >
								<view class="one_ell box-1" style="font-size:30rpx;">
									{{item.title}}
								</view>
							</view>		

							<view class="item-mess box-1">
								下单时间：{{item.create_time}}
							</view>
              <view class="flex-box price-box">
                <view class=" box-1">
                  <!--									¥{{item.price}}-->
                </view>
                <view class="r-text" style="color:black;font-size:26rpx;">
                  x 	1
                  <!-- <u-number-box :min="1" v-model="item.num" @change="valChange"></u-number-box> -->
                </view>
              </view>
						</view>
					</view>
					<view class="flex-box">
						<view class="item-mess box-1">
							<!-- <view>待使用次数：<text style="color:#ae87d8; font-weight: bold;font-size:32rpx;">9</text> 次</view> -->
						</view>
						<view class="flex-box right-btn" style="font-weight: bold;">
							<view class="btn1" v-if="current==1" style="margin-right: 20rpx;" @click="evaluate(item)">立即评价</view>
							<view class="btn1" @click="toMycode(item.code)">查看券码</view>
							<view class="btn2" @click="toUse(item.code)" v-if="current==0">去使用</view>
						</view>
					</view>
				</view>
				
			</view>
			<view v-else>
				<u-empty mode="data" marginTop="100" text="  "></u-empty>
			</view>
		</mescroll-body>
		<u-popup :show="showCond" bgColor="transparent" mode="center"  @close="close" @open="open">
			<view class="p-content" :style="{backgroundImage:`url(${comm_img_url+'/pro/p-tc-bg3.png'})`,backgroundSize: '100% 100%'}">
				<view class="bttom-text">
					<view class="fv-xing">	
						<u-rate count="5" size="26" active-color="#bd96e3" inactive-color="#b2b2b2" v-model="value"></u-rate>
					</view>
					<view class="text">期待您的5星好评 <br> <text class="c-text">您的鼓励能让我们做的更好!！</text></view>
					<view class="btn-img" @click="toService(item)"  >给个好评</view>
				</view>
				<view class="close-btn" @click="showCond=false">
					<u-icon  name="close-circle" size="28" color="#fff"></u-icon>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {apiGoods} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				devaluate:{},
				value:5,
				showCond:false,
				comm_img_url:'',
				dataList:[],
				current:0,
				list1: [
					{
						name: '待使用',
					}, 
					{
						name: '已使用',
					},
				],
				page:1,
				status:0,
				pageSize:10,
			};
		},
		onLoad(option) {
			this.comm_img_url = this.$c.appImg
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
			this.current = option.type
			
		},
		methods:{
			evaluate(item){
				this.devaluate = item
				this.showCond = true
			},
			toService(item){
				this.$u.api.couponEvaluate({id:this.devaluate.id,num:this.value}).then(res => {
						if (res.status) {
							wx.switchTab({url:'/pages/Station/Station'})
						}
					})
					.catch(err => {
						console.log(err);
					})
				
			},
			toMycode(code){
				uni.navigateTo({url:'/pages/sub/myCode/myCode?code='+code})
			},
			toUse(){
				wx.switchTab({
					url:'/pages/Station/Station'
				})
			},
			tabsChange(item) {
				this.current = item.index;
				this.page = 1
				console.log(this.current,'12222')
				this.upCallback(this.page,this.current)
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
			  this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page,status) {
			  //联网加载数据
			  let _this = this
			  this.$u.api.couponMy({page:this.page,status:this.current}).then(res=>{
			  	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			  	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			  
			  	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			  	//this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)
			  
			  	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			  	this.mescroll.endBySize(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总数据量)
			  
			  	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			  	//this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
			  
			  	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			  	// this.mescroll.endSuccess(res.list.length);
			  	//设置列表数据
			  	// if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
				if(_this.page == 1){_this.dataList = [];} //如果是第一页需手动制空列表
				_this.dataList =  _this.dataList.concat(res.msg.list); //如果是第一页需手动制空列表
			  	// this.dataList = res.msg.list; //追加新数据
			  }).catch(()=>{
			  	//联网失败, 结束加载
			  	this.mescroll.endErr();
			  })
			},
		}
	}
</script>

<style lang="scss">
@import 'Services.scss';
.p-content{
	width:560rpx;
	height:540rpx;
	position:relative;
	.close-btn{
		position:absolute;
		bottom:-100rpx;
		left:50%;
		transform: translateX(-50%);
	}
	.bttom-text{
		position:absolute;
		bottom:70rpx;
		left:0;
		text-align: center;
		width:100%;
		.fv-xing{
			margin-left:30rpx;
			margin-bottom:90rpx;
		}
		.text{
			color:#block;
			font-size:30rpx;
			display: block;
			// width:450rpx;
			margin:0 auto;
			padding:30rpx 40rpx;
			line-height:1.4;
			.c-text{
				color:#888888;
				font-size:30rpx;
			}
		}
		.btn-img{
			width:360rpx;
			height:80rpx;
			line-height:80rpx;
			background:#ae87d8;
			border-radius: 40rpx;
			display:block;
			margin:0 auto;
			color:#fff;
		}
	}
}
</style>
